<template>
    <div>
        <div class="flex flex_b">
            <div>
                <el-button type="primary" @click="addBtn" size="mini">添加客户</el-button>
				<el-button  @click="saveBtn" size="mini" :loading="loading_btn">保存客户</el-button>
            </div>
			<div style="display: flex;justify-content: flex-end;">
				<el-button size="mini" type="primary" @click="isShow=true">导入</el-button>
				<el-button size="mini" type="primary" @click="downlodeTemp">下载模板</el-button>
				<el-button size="mini" type="primary" @click="downLode">导出</el-button>
			</div>
        </div>
        <br>
        <div class="searchForm">
			
            <div>
                客户名称： <el-input size="small" v-model="search_form.customer" 
				placeholder="请输入客户名称"  style="width:300px;"></el-input>
            </div>
			<div>
			    状态： <el-radio-group v-model="search_form.status">
						  <el-radio label="0">禁用</el-radio>
						  <el-radio label="1">启用</el-radio>
						</el-radio-group>
			</div>
			<div>
			    助记码： <el-input size="small" v-model="search_form.code" 
				placeholder="请输入助记码"  style="width:150px;"></el-input>
			</div>
            <div>
                <el-button type="primary" size="mini" @click="search">检索</el-button>
                <el-button size="mini" @click="clearSearch">重置/检索</el-button>
            </div>
        </div>
        
		<br>
        <el-table stripe :data="list"  
		     ref="multipleTable"
			 border  
			 style="width: 100%"
			 @selection-change="handleSelectionChange"
			  @cell-click="cellClick"
			>
			<el-table-column
			      type="selection"
			      width="55">
			    </el-table-column>
            <el-table-column   align="center"  width="150px"   
				label="助记码">
				<template slot-scope="scope">
				   <div>
						<el-input  size="mini" v-model="scope.row.code"></el-input>
				   </div>
				</template>
			</el-table-column>
            <el-table-column  align="center" width="180px"  label="客户名称">
				<template slot-scope="scope">
				   <div>
						<el-input  size="mini" :disabled="!!scope.row.id" v-model="scope.row.customer"></el-input>
				   </div>
				</template>
			</el-table-column>
             <el-table-column   align="center"  
				label="客户标志">
				<template slot-scope="scope">
				   <div>
						<el-switch
						  v-model="scope.row.is_customer"
						 :inactive-value="'0'"
						 :active-value="'1'"
						 >
						</el-switch>
				   </div>
				</template>
			</el-table-column>
            <el-table-column   align="center"  width="130px"   label="供应商标志">
				<template slot-scope="scope">
				   <div>
						<el-switch
						  v-model="scope.row.is_suppler"
						 :inactive-value="'0'"
						 :active-value="'1'"
						 >
						</el-switch>
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center"  width="130px"   label="状态">
				<template slot-scope="scope">
				   <div>
						<el-switch
						  v-model="scope.row.status"
						 :inactive-value="'0'"
						 :active-value="'1'"
						 >
						</el-switch>
				   </div>
				</template>
			</el-table-column>
            <!-- <el-table-column   align="center"  width="130px"  label="客户级别">
				<template slot-scope="scope">
				   <div>
						<el-input  size="mini" v-model="scope.row.level"></el-input>
				   </div>
				</template>
			</el-table-column> -->
			
			<el-table-column   align="center"  prop="add_time"    label="添加时间"></el-table-column>
			<el-table-column   align="center"  prop="update_time"  label="修改时间"></el-table-column>
			<!-- <el-table-column   align="center"  prop="update_person"  label="修改人"></el-table-column> -->
           <el-table-column  label="操作" width="80"  fixed="left"  align="center">
                <template slot-scope="scope">
					<i v-if="!scope.row.id"  class="el-icon-delete" style="cursor: pointer;"
					@click.stop="delRow(scope)"></i>
					<span v-else>--</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination
                    background
                    @size-change="pageChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page_totle">
            </el-pagination>
        </div>
		
		<el-dialog
		        title="导入"
				:close-on-click-modal="false"
		        :visible.sync="isShow"
		        width="450px"
		>
		  <div style="text-align: center;">
			  <el-upload
			    v-if="isShow"
				:headers="headers"
			    class="upload-demo"
			    drag
				:on-success="successFile"
				:on-progress="progressFile"
			    :action="action"
				:data="params"
			    >
			    <i class="el-icon-upload"></i>
			    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
			    <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
			  </el-upload>
			  <br>
			  <el-progress :percentage="percent"></el-progress>
		  </div>
		</el-dialog>
    </div>
</template>
<script>
    export default {
        components:{
            
        },

        data(){
            return {
                search_form:{
                    customer:"",
					code:"",
					status:'1'
                },
				pageSize:20,
				page:1,
				page_totle:0,
				isShow:false,
				action:'',
				percent:0,
				params:{
					cid:"",
					update_person:""
				},
				headers:{
					Authorization:""
				}
            }
        },
        mounted(){
            document.title = '往来单位'
		    this.lodeList()
			this.action = this.$domain + '/excel/importCustomer'
			let cid = sessionStorage.getItem('cid')
			let update_person = sessionStorage.getItem('user_name')
			this.params.cid = cid
			this.params.update_person = update_person
			this.headers.Authorization = sessionStorage.getItem('token')+'_'+sessionStorage.getItem('cid')
        },
        methods:{
			downLode(){
				let cid = sessionStorage.getItem('cid')
				
				 var customer
				 if(this.search_form.customer){
					customer = '&customer=' + this.search_form.customer
				 }else{
					customer = '&customer='
				 }
				 
				 var code
				 if(this.search_form.code){
				 	 code = '&code=' + this.search_form.code
				 }else{
				 	 code = '&code='
				 }
				 
				 var status
				 if(this.search_form.status){
				 	 status = '&status=' + this.search_form.status
				 }else{
				 	 status = '&status='
				 }
				
				let url = `${this.$domain}/excel/exportCustomer?cid=${cid}${customer}${code}${status}`
				location.href = url
			},
			downlodeTemp(){
				let baseUrl = this.$baseUrl
				location.href = baseUrl + '/static/excelTemp/temp1.xls'
			},
			successFile(response, file, fileList){
				if(response.code==200){
					this.isShow = false
					 this.lodeList()
				}else{
					this.$message.error(response.msg)
				}
				this.percent = 0
			},
			progressFile(event, file, fileList){
				let percent = event.percent
				this.percent = percent
			},
            delRow(scope){
				let index = scope.$index
				if(scope.row.id){
					this.$message.error('已保存的数据不能删除')
					// this.$confirm('确定删除该客户', '提示', {
					//   confirmButtonText: '确定',
					//   cancelButtonText: '取消',
					//   type: 'warning'
					// }).then(() => {
					// 	this.$post('/goods/delGoods',{id:scope.row.id},res=>{
					// 		this.list.splice(index,1)
					// 		this.$message.success('删除成功')
					// 	})
					// })
				}else{
					this.list.splice(index,1)
				}
            },
            saveBtn(){
				if(this.selectGoods.length==0) return this.$message.error('请选择客户')
				let cid = sessionStorage.getItem('cid')
				let update_person = sessionStorage.getItem('user_name')
				for(let item of this.selectGoods){
					item.cid = cid
					item.update_person = update_person
				}
				this.loading_btn = true
				this.$post('/customer/addEditCustorm',this.selectGoods,res=>{
					this.$message.success('操作成功')
					this.loading_btn = false
					this.lodeList()
				})
			},
			lodeList(){
				let params = {
					search_form:this.search_form,
					page:this.page,
					pageSize:this.pageSize
				}
				this.$post('/customer/getCustomerList',params,res=>{
					let data = res.data.data
					this.page_totle = data.count
					this.list = data.result
				})
			},
            clearSearch(){
                    this.search_form  = {
                            customer:'',
							code:"",
							status:'1'
                    }
                    this.page=1
                    this.pageSize=10
                    this.lodeList()
            },
            addBtn(){
                let obj = {
                    id:undefined,
					code:'',
					customer:"",
					is_customer:'1',
					is_suppler:'1',
					status:'1'
                }
                this.list.push(obj)
            },
        }
    }
</script>
